<template>
	<view class="content">
		<video id="myVideo" style="width: 0px;height: 0px;" :autoplay="true" :title="videoTitle" :src="videoUrl"
			:danmu-list="danmuList" @fullscreenchange="onFullscreen" @ended="onEnd" enable-danmu danmu-btn
			controls></video>
		<view class="top-box" v-if="videoInfo">
			<view class="bg-box">
				<image class="top-bg-image" :src="videoInfo.thumb" v-if="videoInfo.thumb"></image>
				<image class="top-bg-image" src="@/static/images/no_image.jpg" v-else></image>
			</view>
			<view class="top-conent-box">
				<view class="info-box">
					<view class="thumb-box">
						<image class="thumb-image" :src="videoInfo.thumb" v-if="videoInfo.thumb"></image>
						<image class="thumb-image" src="@/static/images/no_image.jpg" v-else></image>
						<text class="score-text">{{videoInfo.score}}</text>
					</view>
					<view class="info">
						<text class="year">{{videoInfo.year}}</text>
						<text class="country">{{videoInfo.region_str}}</text>
						<text class="duration">{{videoInfo.duration}}</text>
					</view>
				</view>

				<view class="play-btn" hover-class="btn-press" @click="playVideo(-1)">
					<text class="icon-font play-btn-text" style="margin-right: 10rpx;">&#xe672;</text>
					<text class="play-btn-text">播放</text>
				</view>
				<view class="subtitle-box">
					<text class="subtitle-text">{{videoInfo.subtitle}}</text>
				</view>
				<view class="tool-box">
					<view class="tool-item" @click="onAddcollect(videoInfo)">
						<text class="icon-font icon" v-if="videoInfo.is_collect">&#xe607;</text>
						<text class="icon-font icon" v-else>&#xe651;</text>
						<text class="text">片单</text>
					</view>
					<view class="tool-item" @click="onAddLike(videoInfo)">
						<text class="icon-font icon" v-if="videoInfo.is_like">&#xe60c;</text>
						<text class="icon-font icon" v-else>&#xe756;</text>
						<text class="text">点赞</text>
					</view>
					<view class="tool-item" @click="onShare">
						<text class="icon-font icon">&#xe600;</text>
						<text class="text">分享</text>
					</view>
					<view class="tool-item" @click="onDownload">
						<text class="icon-font icon">&#xe625;</text>
						<text class="text">下载</text>
					</view>
				</view>
			</view>
		</view>
		<view class="video-list-box">
			<view class="title">选择剧集</view>
			<view class="list-box">
				<text class="text" :class="{'select':playIndex == index}" v-for="(item, index) in videoList"
					:key="item.id" @click="playIndex = index">{{item.title}}</text>
			</view>
		</view>
		<view class="comment-box">
			<view class="title">影评</view>
			<view class="comment-list">
				<text v-if="!commentData || commentData.list.length == 0">暂无内容</text>
				<view v-else class="comment-item" v-for="(comment,index) in commentData.list" :key="comment.id">
					<view class="info-box">
						<view class="avatar-box">
							<image mode="aspectFill" class="avatar-image" :src="comment.avatar"></image>
							<view class="user-info">
								<text class="username">{{comment.nickname ? comment.nickname : comment.username}}</text>
								<text class="comment-date">{{comment.mtime}}</text>
							</view>
						</view>
						<text class="follow-btn" @click="onFollow(comment)" v-if="comment.is_follow == 0">关注</text>
						<text class="cancel-follow-btn" @click="cancelFollowUser(comment)" v-else>取消关注</text>
					</view>
					<view class="comment-content">{{comment.content}}</view>
					<view class="comment-image-list" v-if="comment.images">
						<image :src="image" class="comment-image" v-for="(image,_index) in comment.images"
							@click="onPreimages(comment.images,_index)"></image>
					</view>
					<view class="c-tool-box">
						<view class="c-tool-item" @click="onLike(comment)">
							<text class="icon-font c-tool-btn" v-if="comment.is_like">&#xe60c;</text>
							<text class="icon-font c-tool-btn" v-else>&#xe628;</text>
							<text class="c-tool-text">{{comment.like_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="add-comment" v-if="userInfo" @click="goToAddcomment">
			<image mode="aspectFill" :src="userInfo.avatar" class="avatar-image"></image>
			<text class="add-comment-text">我来发个影评~</text>
		</view>
		<view class="add-comment" v-else @click="goToLogin()">
			<text class="add-comment-text">登陆后可发表影评~</text>
		</view>
		<uni-popup ref="popup" type="center" :mask-click="false" style="z-index: 9999;">
			<view class="download-popup">
				<image class="download-loading_gif" src="@/static/Ball-1s-200px.gif" mode=""></image>
				<view class="download-text">正在下载中: {{ progress }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getVideo,
		getVideoList,
		addCollect,
		removeCollect,
		addLike,
		removeLike,
		getComment,
		addDownlaodHistory
	} from "@/js_sdk/video.js"
	import {
		followUser,
		cancelFollowUser,
		viewVideo
	} from "@/js_sdk/user.js"

	export default {
		data() {
			return {
				vid: null,
				videoInfo: null,
				videoList: [],
				playIndex: -1,
				videoUrl: null,
				danmuList: [],
				player: null,
				videoTitle: null,
				tabList: [],
				commentData: null,
				progress: '0%'
			}
		},
		computed: {
			...mapGetters(["userInfo", "video"])
		},
		onLoad(options) {
			this.vid = options.id
			this.loadVideoList()
			this.getCommentList()
		},
		onShow() {
			if (this.video) {
				this.videoInfo = this.video
				uni.setNavigationBarTitle({
					title: this.video.title
				})
			}
			this.loadViedoInfo()
		},
		onReachBottom() {
			if (this.commentData && this.commentData.current_page >= this.commentData.total_page) return
			this.commentData.current_page++

			this.getCommentData(getCommentList)
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			_viewVideo() {
				viewVideo().then(({
					code,
					msg
				}) => {
					if (code === 400) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
				})
			},
			loadViedoInfo() {
				getVideo(this.vid).then(res => {
					this.videoInfo = res.data
					this.videoTitle = this.videoInfo.title
					this.$store.dispatch("video", res.data)
					this.initPlayIndex()
					uni.setNavigationBarTitle({
						title: this.videoTitle
					})
					console.log(res.data)
				}).catch(error => {
					console.log(error)
				})
			},
			initPlayIndex() {
				var movie = this.videoInfo
				if (movie && movie.history && this.videoList) {
					this.videoList.forEach((item, index) => {
						if (movie.history.movie_detail_id == item.id) {
							this.playIndex = index
						}
					})
				}
			},
			loadVideoList() {
				getVideoList(this.vid).then(res => {
					this.videoList = res.data.list
					if (!this.videoList) return
					this.tabList = []
					this.videoList.forEach(item => {
						this.tabList.push(item.title)
					})
					this.initPlayIndex()
				}).catch(error => {
					console.log(error)
				})
			},
			// 播放
			playVideo(index) {
    //             this.open()
				// console.log(this.videoList)
				// return
				if (this.userInfo === null) {
					return uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
				if (this.userInfo && this.userInfo.share_free_num === 0 && this.userInfo.vip_share_free_num === 0) {
					return uni.showToast({
						title: '免费观看次数已用完',
						icon: 'none'
					})
				}
				if (index == -1) {
					index = this.playIndex >= 0 ? this.playIndex : 0
				}
				if (this.videoList.length == 0) {
					uni.showToast({
						icon: "none",
						title: "暂无可播放视频",
						duration: 2500
					})
					return
				}
				this.playIndex = index
				this.$store.dispatch("playlist", this.videoList)
				
				// uni.navigateTo({
				// 	animationType: 'none',
				// 	url: "/pages/player/player?index=" + index,
				// 	success: () => {
				// 		console.log('play success')
				// 		this._viewVideo()
				// 	}
				// })
				
				uni.navigateTo({
					animationType: 'none',
					url: "/pages/player/index?index=" + index,
					success: () => {
						console.log('play success')
						this._viewVideo()
					}
				})
			},
			onFullscreen({
				detail
			}) {
				if (!detail.fullScreen && this.player) {
					this.player.pause()
				}
			},
			onEnd() {
				if (this.playIndex < this.videoList.length - 1) {
					uni.showToast({
						icon: "none",
						title: "正在自动切换下一集"
					})
					this.playIndex++
					this.videoUrl = this.videoList[this.playIndex].url
					this.player.play()
				}
			},
			goToLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			onAddcollect(info) {
				if (!this.userInfo) {
					this.goToLogin()
					return
				}
				if (info.is_collect) {
					removeCollect({
						vid: info.id,
						type: 4
					}).then(res => {
						info.is_collect = 0
						uni.showToast({
							title: res.msg
						})
					}).catch(error => {
						console.log(error)
					})
				} else {
					addCollect({
						vid: info.id,
						type: 4
					}).then(res => {
						info.is_collect = 1
						uni.showToast({
							title: res.msg
						})
					}).catch(error => {
						console.log(error)
					})
				}

			},
			onAddLike(info) {
				if (!this.userInfo) {
					this.goToLogin()
					return
				}
				if (info.is_like) {
					removeLike({
						vid: info.id,
						type: 4
					}).then(res => {
						info.is_like = 0
						uni.showToast({
							title: res.msg
						})
					}).catch(error => {
						console.log(error)
					})
				} else {
					addLike({
						vid: info.id,
						type: 4
					}).then(res => {
						info.is_like = 1
						uni.showToast({
							title: res.msg
						})
					}).catch(error => {
						console.log(error)
					})
				}

			},
			onShare() {
				uni.showToast({
					icon: "none",
					title: "此功能暂未开放"
				})
			},
			// 添加下载记录
			_addDownloadHistory() {
				addDownlaodHistory(this.videoInfo.id).then(({
					code,
					msg
				}) => {})
			},
			onDownload() {
				// this._addDownloadHistory()
				// return
				if (this.userInfo === null) {
					return uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
				uni.showActionSheet({
					itemList: this.tabList,
					success: res => {
						var video = this.videoList[res.tapIndex]
						if (!video || !video.url) {
							uni.showToast({
								icon: "none",
								title: "没有可下载的视频文件"
							})
							return
						}
						const downloadTask = uni.downloadFile({
							url: video.url,
							success: (res) => {
								//console.log(res)
								uni.hideLoading()
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: (_res) => {
											console.log(_res)
										}
									})
									uni.showToast({
										title: "视频下载成功",
										icon: 'none'
									})
									this._addDownloadHistory()
									this.close()
								} else {
									uni.showToast({
										icon: "none",
										title: "视频下载失败"
									})
								}
							},
							fail: res => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: "视频下载出错"
								})
							}
						});
						this.open()
						downloadTask.onProgressUpdate((res) => {
							console.log(res)
							uni.hideLoading()
							if (res.progress >= 100) return
							this.progress = res.progress + "%"
						});
					},
					fail: res => {
						console.log(res.errMsg);
					}
				});
			},
			goToAddcomment() {
				uni.navigateTo({
					url: "/pages/addComment/addComment?vid=" + this.vid,
					animationType: "slide-in-bottom"
				})
			},
			getCommentList(replace) {
				getComment({
					type: 3,
					oid: this.vid,
					page: this.commentData ? this.commentData.current_page : 1
				}).then(res => {
					if (replace) {
						this.commentData = res.data
					} else {
						if (!this.commentData) {
							this.commentData = res.data
						} else {
							this.commentData.list = this.commentData.list.concat(res.data.list)
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			onPreimages(images, index) {
				var list = []
				for (var i = 0; i < images.length; i++) {
					var item = images[i]
					if (!item) continue
					var length = item.indexOf("?")
					list.push(length == -1 ? item : item.substr(0, length))
				}

				uni.previewImage({
					current: index,
					urls: list
				})
			},
			onFollow(item) {
				if (!this.userInfo) {
					this.goToLogin()
					return
				}
				uni.showLoading({
					title: "正在提交"
				})
				followUser({
					follow_id: item.user_id
				}).then(res => {
					uni.showToast({
						title: res.msg
					})
					item.is_follow = 1
				}).catch(error => {
					console.log(error)
				})
			},
			cancelFollowUser(item) {
				if (!this.userInfo) {
					this.goToLogin()
					return
				}
				uni.showLoading({
					title: "正在提交"
				})
				cancelFollowUser({
					follow_id: item.user_id
				}).then(res => {
					uni.showToast({
						title: res.msg
					})
					item.is_follow = 0
				}).catch(error => {
					console.log(error)
				})
			},
			onLike(item) {
				if (!this.userInfo) {
					this.goToLogin()
					return
				}
				uni.showLoading({
					title: "正在提交"
				})
				if (item.is_like == 0) {
					addLike({
						vid: item.id,
						type: 2
					}).then(res => {
						uni.showToast({
							title: res.msg
						})
						item.is_like = 1
						item.like_num++
					}).catch(error => {
						console.log(error)
					})
				} else {
					removeLike({
						vid: item.id,
						type: 2
					}).then(res => {
						uni.showToast({
							title: res.msg
						})
						item.is_like = 0
						item.like_num--
					}).catch(error => {
						console.log(error)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/font.css";
	.download-text {
		font-size: 28rpx;
		color: #333333;
	}
  .download-popup {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx;
	width: 250rpx;
	height: 250rpx;
	text-align: center;
  }
	.download-loading_gif {
		width: 200rpx;
		height: 200rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 100vh;
		background-color: #000000;
	}

	.top-box {
		display: flex;
		position: relative;
		flex-direction: column;
	}

	.bg-box {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.top-bg-image {
		filter: blur(8px);
		width: 100%;
		height: 100%;
	}

	.top-conent-box {
		z-index: 999;
		background-image: linear-gradient(rgba(28, 28, 28, 0), rgba(28, 28, 28, 1));
	}

	.thumb-box {
		width: 220rpx;
		height: 280rpx;
		background-color: #C8C7CC;
		margin: auto;
		margin-top: 60rpx;
		overflow: hidden;
		position: relative;
	}

	.thumb-image {
		width: 220rpx;
		height: 280rpx;
	}

	.score-text {
		position: absolute;
		font-size: $uni-font-size-base;
		color: #ce5e30;
		bottom: 5rpx;
		right: 10rpx;
	}

	.info {
		text-align: center;
		padding: 20rpx;
		color: #C0C0C0;
	}

	.info .year {
		margin-right: 20rpx;
	}

	.info .duration {
		margin-left: 20rpx;
	}

	.play-btn {
		display: flex;
		flex-direction: row;
		background-color: #f42c2c;
		padding: 20rpx;
		border-radius: 10rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
	}

	.play-btn-text {
		font-size: $uni-font-size-base;
		color: #FFFFFF;
	}

	.subtitle-box {
		padding: 20rpx;
		font-size: $uni-font-size-base;
		color: #FFFFFF;
		font-weight: bold;
	}

	.tool-box {
		display: flex;
		flex-direction: row;
		padding: 30rpx 80rpx 80rpx;
		justify-content: space-between;
		align-items: center;
	}

	.tool-box .tool-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tool-box .tool-item .icon {
		color: #FFFFFF;
		font-size: 48rpx;
		margin-bottom: 20rpx;
	}

	.tool-box .tool-item .text {
		color: #C8C7CC;
		font-size: 28rpx;
	}

	.video-list-box {
		background-color: #1c1c1c;
		padding: 20rpx;
	}

	.video-list-box .title {
		color: #FFFFFF;
		font-size: $uni-font-size-lg;
		font-weight: bold;
	}

	.video-list-box .list-box {
		padding: 20rpx 0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.video-list-box .list-box .text {
		color: #F1F1F1;
		font-size: $uni-font-size-base;
		border: #F8F8F8 1px solid;
		padding: 10rpx 20rpx;
		margin: 10rpx;
	}

	.video-list-box .list-box .select {
		color: #F0AD4E;
		border: #F0AD4E 1px solid;
	}

	.btn-press {
		opacity: 0.7;
	}

	.comment-box {
		margin-top: 20rpx;
		background-color: #1c1c1c;
		padding: 20rpx;
	}

	.comment-box .title {
		color: #FFFFFF;
		font-size: $uni-font-size-lg;
		font-weight: bold;
	}

	.comment-box .comment-list {
		padding: 20rpx 0;
		color: #F8F8F8;
	}

	.add-comment {
		position: fixed;
		display: flex;
		flex-direction: row;
		background-color: #2e2e2f;
		width: 750rpx;
		height: 100rpx;
		bottom: 0rpx;
		justify-content: center;
		align-items: center;
	}

	.avatar-image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border-width: 2px;
		border-style: solid;
		border-color: #00a3ff;
	}

	.add-comment-text {
		color: #C8C7CC;
		font-size: $uni-font-size-base;
		margin-left: 30rpx;
	}

	.comment-item {
		border-bottom: #353535 1px solid;
		padding: 20rpx 0;
	}

	.comment-item .info-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.avatar-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.avatar-box .avatar-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		border-color: #ff7ddd;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.user-info .username {
		font-size: 32rpx;
		font-weight: bold;
	}

	.user-info .comment-date {
		font-size: 28rpx;
		color: #C8C7CC;
	}

	.comment-content {
		padding: 20rpx 0;
	}

	.comment-image-list {}

	.comment-image-list .comment-image {
		width: 215rpx;
		height: 215rpx;
		margin: 10rpx;
	}

	.follow-btn {
		background-color: #DD524D;
		color: #F1F1F1;
		font-size: $uni-font-size-sm;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.cancel-follow-btn {
		background-color: #3F536E;
		color: #F1F1F1;
		font-size: $uni-font-size-sm;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.c-tool-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-top: 20rpx;
	}

	.c-tool-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.c-tool-btn {
		display: flex;
		font-size: 32rpx;
		color: #F1F1F1;
	}

	.c-tool-text {
		display: flex;
		font-size: 32rpx;
		color: #F1F1F1;
		margin-left: 10rpx;
	}
</style>
